<template>
  <view class="pb250">
    <u-radio-group v-model="value" :active-color="'#F3651F'" icon-size="40">
      <u-card
        :border="true"
        :show-foot="false"
        :borderRadius="20"
        :full="false"
        :body-style="bodystyle"
        :head-border-bottom="false"
        :foot-border-top="false"
        v-for="item in list"
        :key="item.id"
        @click.self.prevent="choose(item.id)"
      >
        <view slot="head" class="head">
          <view>我的地址</view>
          <view>
            <image @click.stop.prevent="navTo(item.id)" src="@/static/icon/xiugai.png"></image>
          </view>
        </view>
        <view slot="body" class="body">
          <view class="bodyitem">
            <image src="/static/icon/dizhi1.png" mode="" />
            <view>{{ item.province + item.city + item.area + item.addr }}</view>
          </view>
          <view class="bodyitem">
            <image src="/static/icon/renwu.png" mode="" />
            <view>{{ item.name }}</view>
          </view>
          <view class="bodyitem">
            <image src="/static/icon/dianhua.png" mode="" />
            <view>{{ item.mobile }}</view>
          </view>
          <u-line color="#e1e1e1" />
          <view class="c-flex c-flex-between">
            <view>
              <u-radio :name="item.id" @change="radioChange(item.id)"> 设置为默认地址 </u-radio>
            </view>
            <view @click.stop="del(item.id)">删除</view>
          </view>
        </view>
      </u-card>
    </u-radio-group>
    <view class="mt200" v-if="list.length === 0"> <u-empty text="还没有地址哦" mode="list"></u-empty> </view>
    <view class="btn-box">
      <SaveButton @navTo="add" text="添加新的收货地址" />
    </view>
  </view>
</template>
<script>
  import SaveButton from '@/commponents/public/button/SaveButton'
  import address from '@/services/address'
  import url from '../../common/util/url'
  export default {
    data() {
      return {
        title: '我的地址',
        signtitle: '素胚勾勒出青花，笔锋浓转淡',
        subTitle: '2020-05-15',
        thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
        bodystyle: {
          paddingTop: 0
        },
        value: 1,
        list: [],
        params: ''
      }
    },
    components: {
      SaveButton
    },
    methods: {
      choose(id) {
        if (uni.getStorageSync('addressFrom')) {
          wx.navigateTo({
            url: `/${uni.getStorageSync('addressFrom')}?addressId=${id}`
          })
          uni.setStorageSync('addressFrom', false);
        }
      },
      navTo(id) {
        wx.navigateTo({
          url: '/pages/editaddress/index?id=' + id
        })
      },
      del(id) {
        this.list.map((item, index) => {
          if (item.id === id) {
            this.list.splice(index, 1)
          }
        })
        address.del(id)
      },
      radioChange(id) {
        address.setDefault(id).then(() => {
          // this.list = []
          // this.getList()
        })
      },
      getList() {
        address.list().then(data => {
          this.list = data
          this.list.map(item => {
            if (item.isDefault) {
              this.value = item.id
              return item.id
            }
          })
        })
      },
      add() {
        wx.navigateTo({
          url: `/pages/editaddress/index?from=${this.params.from}`
        })
      }
    },
    mounted() {
      this.params = url.getCurrentPageParam()
      this.getList()
    }
  }
</script>
<style scoped>
  .pb250 {
    padding-bottom: 250rpx;
  }
  .mt200 {
    margin-top: 200rpx;
  }
  .btn-box {
    position: fixed;
    width: 100%;
    bottom: 20rpx;
  }
  u-card >>> .u-card {
    border-radius: 40rpx !important;
    border: 1px solid #e1e1e1;
  }

  u-card >>> .u-card::after {
    border-radius: 60rpx;
  }
  .head {
    display: flex;
    justify-content: space-between;
  }
  .head image {
    width: 40rpx;
    height: 40rpx;
  }
  .head view {
    font-family: PingFang SC;
    font-size: 32rpx;
    font-weight: 600;
    color: #8992a3;
  }
  .bodyitem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 80rpx;
  }
  .bodyitem > image {
    width: 36rpx;
    height: 40rpx;
  }
  .bodyitem > view {
    font-size: 30rpx;
    font-weight: 600;
    font-family: PingFang SC;
    color: #303030;
    margin-left: 40rpx;
  }
  .btnBox {
    padding: 0 48rpx;
  }
  .c-flex {
    display: flex;
    margin-top: 30rpx;
  }
  .c-flex-between {
    justify-content: space-between;
  }
</style>
